<template>
  <div class="WarehouseDiaLogcontent">
    <el-dialog :visible="showDialog" title="添加商品" width="50%" :close-on-click-modal="false" @close="close">
      <div class="main">
        <div class="leftTree">
          <el-tree @node-click="handleNodeClick" ref="orgTree" :data="treeList" :default-expand-all="true"
            :current-node-key="defaultExpandedId" node-key="id" :props="defaultProps" highlight-current icon-class=" "
            :default-expanded-keys="[defaultExpandedId]" accordion>
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span v-if="node.level == 1" class="father">
                <!-- <i class="el-icon-school"></i> -->
                <svg-icon icon-class="warehouse" color="#000000"></svg-icon>
                <span class="text">{{ data.name }}</span>
              </span>
              <span v-else-if="node.level == 2" class="son">{{ data.name }}</span>
            </span>
          </el-tree>
        </div>
        <div class="rightTable">
          <div style="background-color: #fff; padding-top: 20px">
            <el-table border ref="multipleTable" @row-click="handlerClick" @selection-change="selFn" class="tablebox"
              :data="tableList" style="width: 100%" height="400" size="medium">
              <el-table-column type="selection" align="center" width="55" />
              <el-table-column prop="code" align="center" label="通道编码" />
              <el-table-column prop="name" align="center" label="通道名称" />
              <el-table-column align="center" label="关联仓位">
                <template v-slot="{ row }">
                  <span style="color: rgb(0, 89, 255);">{{ row.count }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div slot="footer" class="dialog-footer" style=" margin-left:35%;padding: 0!important;">
            <div class="top" style="padding-top: 20px;padding-right: 8%;">
              <el-button class="submitBtn" @click="btnOk">确 定</el-button>
              <el-button @click="close" style="width: 88px;">取 消</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqRegionListByWarehouseIdForCheck, reqAisleListByRegionIdForCheck } from '@/api/storage'
export default {
  name: 'WarehouseDiaLog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    warehouseId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableList: [],
      treeList: [{
        name: '',
        id: '',
        level: 1,
        children: []
      }],
      defaultExpandedId: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selectionIdList: []
    }
  },
  created() {
    // this.getTreeList()
  },
  mounted() {
  },
  methods: {
    async getTreeList(obj) {
      //this.treeList = []
      if (obj) {
        this.treeList[0].name = obj.name
        this.treeList[0].id = obj.id
      }
      const res = await reqRegionListByWarehouseIdForCheck({ warehouseId: this.warehouseId })
      if (res.code == 200) {
        console.log('仓库区域', res.data);
        this.treeList[0].children = res.data

      }
    },
    close() {
      this.$emit('update:showDialog', false)
      this.tableList = []
    },
    btnOk() {
      if (this.selectionIdList.length == 0) {
        this.$message.warning('请选择通道')
        return
      } else {
        this.$emit('selectionIdListFn', this.selectionIdList)
      }
    },
    async handleNodeClick(ele) {
      console.log('ele', ele);
      const res = await reqAisleListByRegionIdForCheck({ regionId: ele.id })
      if (res.code == 200) {
        this.tableList = res.data
      }
    },
    handlerClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    selFn(selection) {
      this.selectionIdList = selection.map(item => item.id)
      console.log('this.selectionIdList', this.selectionIdList);
    }
  }
}
</script>

<style lang="scss" scoped>
.WarehouseDiaLogcontent {
  background: #fff;

  .main {
    display: flex;
    justify-content: space-evenly;
  }

  .leftTree {
    // margin: 0 10px;
    width: 32%;
    height: 500px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
  }

  .rightTable {
    width: 61%;
    height: 500px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
  }
}
</style>
